<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row :gutter="48">
        <a-col :md="8" :sm="24">
          <a-form-item label="选择时间">
            <a-range-picker
              format="YYYY-MM-DD"
              :show-time="false"
              v-decorator="['range-time-picker']"
              :allowClear="true"
              @change="event_changeCreateTime"
              v-model="dateArr"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :md="16" :sm="24">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="resetQueryParam" :style="{ margin: '0 8px' }">重置</a-button>
          <a-button v-if="$auth('PROJECT.PROJECT_BUDGET_EXPORT')" icon="export" @click="clickExport" >导出</a-button>
        </a-col>
      </a-row>
    </a-form>
    <s-table ref="table" size="default" :row-key="record => record.id" :data="loadData">
      <a-table-column title="序号" key="id" data-index="id">
        <template slot-scope="text, row, index">{{ index + 1 }}</template>
      </a-table-column>
      <a-table-column title="预算金额" key="budgetAmount" data-index="budgetAmount" />
      <a-table-column title="审核状态" key="status" data-index="status" >
        <template slot-scope="text, record">
          {{ record.status | enumValueByKey($const.AUDGET_STATUS) }}
        </template>
      </a-table-column>
      <a-table-column title="申请人员" key="username" data-index="username" />
      <a-table-column title="申请时间" key="createTime" data-index="createTime">
        <template slot-scope="text, record">
          {{ record.createTime | moment() }}
        </template>
      </a-table-column>
      <a-table-column title="操作" align="center">
        <template slot-scope="record">
          <a v-if="$auth('PROJECT.PROJECT_BUDGET_DETAIL')" @click="clickViewDetail(record,false)" style="margin-right:10px" >查看</a>
          <a v-if="$auth('PROJECT.PROJECT_BUDGET_REVIEW') && record.status == 0" @click="clickViewDetail(record,true)" style="margin-right:10px" >审核</a>
        </template>
      </a-table-column>
    </s-table>
    <div class="budgetView"><span>总预算:</span>{{ budgetAmt }}</div>
    <a-button
      v-if="$auth('PROJECT.PROJECT_BUDGET_ADD')"
      @click="handleAddBidgetVisible(true)"
    >
      添加预算
    </a-button>
    <AddBudget :visible="AddBudgetVisible" @ok="confirmAdd" @handleCancel="handleAddBidgetVisible(false)" />
    <ViewBudget :visible="viewBudgetVisible" :id="recordId" :is-audit="isAudit" @handleCancel="handleViewBidgetVisible(false)" />
  </div>
</template>
<script>
import { exportExcel } from '@/utils/util'
import { budgetList, addBudget, budgetExport } from '@/api/overview/budget'
import { buildPaginationObj } from '@/components/Table'
import AddBudget from './addBudget'
import ViewBudget from './viewBudget'
export default {
  components: { AddBudget, ViewBudget },
  props: {
    datailId: {
      type: [Number, String],
      default: 0
    },
    budgetAmt: {
      type: [Number, String],
      default: 0
    }
  },
  data () {
    return {
      recordId: '',
      dateArr: [],
      AddBudgetVisible: false,
      viewBudgetVisible: false,
      queryParam: {},
      isAudit: false,
      loadData: parameter => {
        if (this.$auth('PROJECT.PROJECT_INCOME_LIST')) {
          return budgetList(Object.assign(parameter, this.queryParam))
          .then(res => {
            console.log(res, '获取的资金流水信息')
            return res
          })
          .catch(() => {})
        } else {
          return Promise.resolve(buildPaginationObj([]))
        }
      }
    }
  },
  created () {
    // this.queryParam.proId = this.$route.query.proId
    this.queryParam.proId = this.datailId
  },
  methods: {
    confirmAdd (data) {
      addBudget({
        proId: this.datailId,
        ...data
      }).then(res => {
        this.$message.success('添加成功')
      })
    },
    clickExport () {
      budgetExport({
        ...this.queryParam,
        proId: this.datailId
      }).then(res => {
        exportExcel('资金流水', res)
      })
    },
    handleAddBidgetVisible (flag = false) {
      this.AddBudgetVisible = flag
    },
    handleViewBidgetVisible (flag = false) {
      this.viewBudgetVisible = flag
    },
    clickViewDetail (record, flag) {
      this.recordId = record.id
      this.isAudit = flag
      this.handleViewBidgetVisible(true)
    },
    event_changeCreateTime (date, dateString) {
      this.queryParam.startTime = dateString[0]
      this.queryParam.endTime = dateString[1]
    },
    // 点击重置按钮清空查询
    resetQueryParam () {
      this.dateArr = []
      this.queryParam = { proId: this.datailId }
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style lang="less" scoped>
  .budgetView{
    margin: 10px 0 20px 0;
    font-size: 18px;
    span{
      margin-right: 10px;
    }
  }
</style>
